<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/day_cars.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<script type="text/javascript" src="${ctxStatic }/wx/js/fx.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1"></script>
<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/wx/mui/js/mui.view.js"></script>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="days_car_list" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">订单填写</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="days_lists_form">
			<form class="mui-input-group" id="dayForm">
			<input type="hidden" name="cuponsId" value="" id="cuponsId"/>
    		<input type="hidden" value="" id="cuponsMoney" name="money"/>
			<input type="hidden" name="userid" value="${sessionScope.front_user.id}" />
			<input type="hidden" name="ordername" value="${tRentproduct.productname}" />
			<input type="hidden" name="ordertype" value="2" />
			<input type="hidden" name="bookingdays" value="${query.daysnum }" />
			<input type="hidden" name="cargotypeid" value="${tRentproduct.cargotype.cargotypeid }" />
			<input type="hidden" name="office.id" value="${tRentproduct.office.id }" />
			<input type="hidden" name="realscheid" value="${query.rentid }" />
			<input type="hidden" name="fromdateStr" value="${query.fromdateStr }" />
			<input type="hidden" name="departdateStr" value="${query.fromdateStr }" />	  	   
								<div class="list_f_tit">
									<span>
				 	  	  	 	<img src="${ctxStatic }/wx/img/day_img/yongchexinxi_atbc@2x.png"/>
				 	  	  	 </span>
									<span>用车信息</span>
								</div>
								<div class="mui-input-row">
									<label>产品名称</label>
									<p class="lists_jk">${tRentproduct.productname}</p>
								</div>
								<div class="mui-input-row">
									<label>用车时间</label>
									<p class="lists_jk">${query.fromdateStr }</p>
								</div>
								<div class="mui-input-row">
									<label>包车天数</label>
									<p class="lists_jk">
										<c:if test="${query.daysnum==0 }">0.5天</c:if>
										<c:if test="${query.daysnum!=0 }">${query.daysnum }天</c:if>
									</p>
								</div>
								<div class="mui-input-row">
									<label>车型</label>
									<p class="lists_jk">${tRentproduct.cargotype.typename }</p>
								</div>
								<div class="mui-input-row">
									<label>服务车队</label>
									<p class="lists_jk">${tRentproduct.office.abbr }</p>
								</div>
								<div class="mui-input-row">
									<label>特色服务</label>
									<p class="lists_jk">
										<c:if test="${query.office.iswifi == '1' }">无线wifi</c:if>
										<c:if test="${query.office.powersupply == '1' }">车载充电</c:if>
										<c:if test="${query.office.tablewater == '1' }">免费饮用水</c:if>
										<c:if test="${query.office.businesssuit == '1' }">商务正装</c:if>
										<c:if test="${query.office.paper == '1' }">免费纸巾</c:if>
									</p>
								</div>
								<div class="list_f_tit">
									<span>
				 	  	  	 	<img src="${ctxStatic }/wx/img/day_img/xinxitianxie_atbc@2x.png"/>
				 	  	  	 </span>
									<span>信息填写</span>
								</div>
								<div class="mui-input-row">
									<label>用车辆数</label>
									<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
										<button class="mui-btn mui-btn-numbox-minus purchasenum" type="button" >-</button>
										<input class="mui-input-numbox" type="number" id="num" name="purchasenum"/>
										<button class="mui-btn mui-btn-numbox-plus purchasenum" type="button">+</button>
									</div>
								</div>
								<div class="mui-input-row">
									<a href="#wap_lists">
										<label style="color: #333;">上车地点</label>
										<input style="color: #333;" type="text" id="days_l_date" name="boardaddr" class="mui-input-clear" placeholder="请选择第一天上车地点">
									</a>
								</div>
								<div class="mui-input-row">
									<label>联系人</label>
									<input type="text" class="mui-input-clear" name="contacts" placeholder="请填写联系人姓名" id="contacts">
								</div>
								<div class="mui-input-row">
									<label>联系电话</label>
									<input type="text" class="mui-input-clear" placeholder="请填写联系电话" id="payertel"
										name="payertel" value="${sessionScope.front_user.mobile}">
								</div>
								<div class="mui-input-row">
									<label>行程备注</label>
									<textarea placeholder="请填写行程备注（选填）" name="remarks"></textarea>
								</div>
								<div class="list_f_tit">
									<span>
				 	  	  	 	          <img src="${ctxStatic }/wx/images/yhq_wode@2x.png"/>
				 	  	  	            </span>
									<span>优惠券</span>
								</div>
								<div class="mui-input-row d_list_coupon">
									<a href="#coupon_total" class="mui-navigate-right cou_choice" id="yhq">
										<span class="do_cou_txt">请选择优惠券</span>
										<span class="do_cou_ty"></span>
									</a>
								</div>
								<div class="list_f_tit" id="note">
									<a href="#reservet_md">
									<span>
				 	  	  	 	   <img src="${ctxStatic }/wx/img/day_img/xuzhi_atbc@2x.png"/>
				 	  	  	        </span>
									<span>预订须知</span>
									<i class="mui-icon mui-icon-arrowright" style="color: #C8C7CC;"></i>
									</a>
								</div>
							
		</form>
						</div>
					</div>
				</div>
			</div>
			<nav class="mui-bar mui-bar-tab db_box">
				<div class="mui-row">
					<div class="mui-col-xs-6">
						<span class="db_or_cost" >
							<c:set var="totalPrice" value="${totalPrice}"/>
							总额：￥<span id="suitrtnprice">${totalPrice}</span>
						</span>
					</div>
					<div class="mui-col-xs-6">
						<button class="db_btn" id="sub" >提交</button>
					</div>
				</div>
			</nav>
		</div>
		<!--单页面结束-->
		<div id="wap_lists" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left ychback" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">订单填写</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="ych_city_box">
							<div class="mui-row ych_back_ico mui-input-row">
								<i class="mui-icon mui-icon-search wap_d_date_ico"></i>
								<input type="text" id="suggestId" class="mui-input-clear" size="20"  style="width:100%;" placeholder="请输入上车地点" value=""/>
							</div>
						</div>
						<div id="searchResultPanel" style="border:none;width:100%;height:auto; display:none;z-index: 22;"></div>
						<div id="l-map"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 百度地图API功能
			function G(id) {
				return document.getElementById(id);
			}

			var map = new BMap.Map("l-map");
			map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。

			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});

			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if(e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
				value = "";
				if(e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				G("searchResultPanel").innerHTML = str;
			});
			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			});
		</script>

		<div id="coupon_total" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">选择优惠券</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="ul"></div>
				</div>
			</div>
		</div>
		
		<!--预订须知 -->
		<div id="reservet_md" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">预定须知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="main">
						 <div class="margs">
        <div class="start">
            <p class="start-1">费用明细</p>

                <p>
                    费用包含： 【套餐价8小时300公里/天】 司机代驾服务费、车辆使用费、车辆油电费、空驶费、夜间服务费、司机小费。</br> 
费用不含：超时服务费、超公里费、司机食宿费、第三方收费。
                </p>

        </div>

<div>

    <p class="start-1">取消须知</p>
    <div class="mour">
       <p> ●该产品支持取消。</p>
      <p>●出行日期前72小时前取消，免收违约金；</p>
      <p>●出行日期前72小时至24小时取消，收取费用总额30%的违约金；</p>
      <p>●出行开始前24小时取消，收取费用总额50%的违约金；</p>
      <p>●超过发车时间不可退款。</p>
      <p>●如需改期，请申请取消后重新预订。</p>   
    </div>
   </div>
           <p class="start-1">
                重要提示
            </p>
            <div class="mour">
             <p>1.如您的预订时间距离发车时间在12小时以内，为保证您的顺利出行，请保持您的电话畅通。</p>
             <p> 2.司机食宿费一般由订车人安排，如不能安排，由司机向订车人收取相应的食宿补贴，标准为：住宿200元/晚、三餐80元/天。</p>
             <p> 3.不含费用收费标准:</p>
             <p>(1)超时长费：当日用车总时长超过<c:if test="${query.daysnum==0 }">4</c:if><c:if test="${query.daysnum!=0 }">8</c:if>小时后，订车人主动要求增加用车时长，将按相应标准收取超时长费。标准：${tRentproduct.cargotype.typename }：${tRentproduct.outtimefee }元/小时。 </p>
             <p>(2)超公里费：当日用车总里程超过<c:if test="${query.daysnum!=0 }">${rentgroup.kms }</c:if>
		<c:if test="${query.daysnum==0 }">${rentgroup.kms/2 }</c:if>公里后，订车人主动要求增加用车里程，将按相应标准收取超公里费。标准：${tRentproduct.cargotype.typename }：${tRentproduct.outkmsfee }元/公里。</p>
             <p>(3)因第三方收取的停车费、路桥费、摆渡费等由订车人现场自付，发票可自行保留。</p>
             <p>4.如产生不含费用项请在服务结束后，将钱面付司机。严禁司机额外乱收费，如发现可联系霞客约车客服核实退还。</p>
             <p>5.开具发票:如需发票，由霞客约车根据订单金额统一开具。请在服务完成后至我的账户—关于发票—立即开票填写开票信息，开票总金额为订单费用。</p>
            </div> 
    </div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#days_car_list'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();

		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
		})(mui);
		function accMul(arg1, arg2) {
			var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
			try {
				m += s1.split(".")[1].length;
			} catch (e) {
			}
			try {
				m += s2.split(".")[1].length;
			} catch (e) {
			}
			return Number(s1.replace(".", "")) * Number(s2.replace(".", ""))
					/ Math.pow(10, m);
		}
		Zepto(function() {
			var suitrtnprice = '${totalPrice}';
			var totalprice = suitrtnprice;
			$('.purchasenum').on('tap',function(){
				//清空优惠券信息
				$('.do_coupon').removeClass('do_coupon_gc')
				$('.do_cou_txt').text('请选择优惠券').css('color', '#C8C7CC');
				$('.do_cou_ty').text('');
				$('#cuponsId').val('');
				$('#cuponsMoney').val('');
				var val = $("#num").val();
				totalprice = accMul(val,suitrtnprice);
				$('#suitrtnprice').text(totalprice.toFixed(0));
				$('#total').val(totalprice.toFixed(0));
			});
			//传值
			$('.ychback').on('tap', function() {
				var oInput = $('#suggestId').val();
				$('#days_l_date').attr('value', oInput);
			})
			//须知
			$('#note').on('tap', function() {
			})
			//表单提交
			$('#sub').on('tap', function() {
				var msg= '';
				var r = /^1[3|4|5|7|8]\d{9}$/;
				var x = $('#days_l_date').val();//上车地点
				var y = $('#contacts').val();//出发地
				var z = $('#payertel').val();//出发地
				if(x == ''){
					msg = '请填写上车地点';
				} else if(y==''){
					msg = '请填写联系人';
				}else if(z==''){
					msg = '请填写联系电话';
				}else if(!r.test(z)){
					msg = '手机号格式不正确';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				} else{
					mui.post('${ctxFront}/mobile/submitDayRentOrder',$('#dayForm').serialize(),function(d){
								if(d.code=='200'){
									var orderid = d.data.orders.orderid;
									window.location.href = "${ctxWx}/pu/pay/payWay?orderid="+orderid;
								}else{
									mui.alert(d.message);
								}
							});
				}
			})
			//获取优惠券
			$('#yhq').on('tap', function() {
				mui.post('${ctxFront}/mobile/canusecupons',{userId:'${sessionScope.front_user.id}',nowPrice:$('#suitrtnprice').text()},function(d){
					if(d.code=='200'){
						var sm = d.data.info;
						//var x = Number($('#suitrtnprice').text())+Number($('#cuponsMoney').val());
						var x = Number(totalprice);
						var table = document.getElementById("ul");
						table.innerHTML = "";//清空数据
						for (var i=0;i<sm.length;i++) {
							if(x<Number(sm[i].minPrice)){
								continue;
							}
							var div = document.createElement("div");
							var dateStr = getLocalTime(sm[i].timeOver);
							div.className = "coupon_t_wrap";
							var str = "";
							if(i==0){
								str += "<div class='no_coupon mui-action-back'>";
								str	+= "	<button type='button'>不使用优惠券</button>";
								str	+= "</div>";
							}
							str += "<div class='do_coupon mui-action-back'>";
							str += "<div class='mui-row'>";
							str += "<div class='mui-col-xs-4 do_coupon_cost'>";
							if (sm[i].type=='0') {//满减
								str += "<span class='do_cou_ct'>￥"+sm[i].price+"</span>";
							} else{//折扣
								str += "<span class='do_cou_ct'>"+sm[i].price+"折</span>";
							}
							str += "<span style='display:none;' class='cuponsMoney'>"+sm[i].price+"</span>";
							str += "</div>";
							str += "<div class='mui-col-xs-8 do_coupon_txt'>";
							str += "<p class='do_cou_type'>"+sm[i].name+"</p>";
							str += "<input type='hidden' class='cuponsId' name='cuponsId' value='"+sm[i].cuponRecordId+"'>";
							str += "<p>"+sm[i].instruction+"</p>";
							str += "<p>有效期至："+dateStr+"</p>";
							str += "</div>";
							str += "</div>";
							str += "</div>";
							
							div.innerHTML = str;
	            			table.appendChild(div);
						}
						if (table.innerHTML=="") {
							mui.alert("暂无可用优惠券")
						}
			$('.no_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${totalPrice}';
				$('.do_coupon').removeClass('do_coupon_gc')
				$('.do_cou_txt').text('请选择优惠券').css('color', '#C8C7CC');
				$('.do_cou_ty').text('');
				var val = $("#num").val();
				var totalprice = accMul(val,suitrtnprice);
				suitrtnprice = totalprice;
				$('#suitrtnprice').text(suitrtnprice);
				$('#total').val(suitrtnprice.toFixed(0));
			})
			//优惠券
			$('.do_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${totalPrice}';
				$(this).addClass('do_coupon_gc').siblings('.do_coupon').removeClass('do_coupon_gc');
				//传值
				var costxt = $(this).find('.do_cou_ct').text();
				var costxt2 = $(this).find('.cuponsMoney').text();
				var costype = $(this).find('.do_cou_type').text();
				var cuponsId = $(this).find('.cuponsId').val();
				if(costxt.indexOf("折")>-1){
					$('.do_cou_txt').text(costxt).css('color', 'red');
				}else{
					$('.do_cou_txt').text('-' + costxt).css('color', 'red');
				}
				var val = $("#num").val();
				var totalprice = accMul(val,suitrtnprice);
				suitrtnprice = totalprice;
				if(costxt2<10){  //代表打折券
					suitrtnprice = Math.round(suitrtnprice * (costxt2/10));
					costxt2 = totalprice - suitrtnprice;
				}else{//满减券
					suitrtnprice = suitrtnprice - costxt2;
				}
				//清空优惠券信息
				$('#suitrtnprice').text(suitrtnprice);
				$('#total').val(suitrtnprice.toFixed(0));
				$('.do_cou_ty').text(costype);
				$('#cuponsId').val(cuponsId);
				$('#cuponsMoney').val(costxt2);
			})
					}else{
						mui.alert("暂无可用优惠券");
					}
				});
			});
			function getLocalTime(nS) {  
		var date = new Date();  
	    date.setTime(nS);  
	    var y = date.getFullYear();      
	    var m = date.getMonth() + 1;      
	    m = m < 10 ? ('0' + m) : m;      
	    var d = date.getDate();      
	    d = d < 10 ? ('0' + d) : d;      
	    var h = date.getHours();    
	    h = h < 10 ? ('0' + h) : h;    
	    var minute = date.getMinutes();    
	    var second = date.getSeconds();    
	    minute = minute < 10 ? ('0' + minute) : minute;      
	    second = second < 10 ? ('0' + second) : second;     
	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;      
	};
		})
	</script>
</html>